<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const pageSize = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '巡检项名称', key: 'itemName', sortable: false},
    {title: '巡检项异常', key: 'itemAbnormal', sortable: false},
    {title: '异常等级', key: 'abnormalLev', sortable: false},
    {title: '巡检类型', key: 'checkType', sortable: false},
    {title: '科室类型', key: 'specialOffice', sortable: false},
    {title: '职能科室', key: 'officeId', sortable: false},
    {title: '显示的科室', key: 'placeIdList', sortable: false},
    {title: '屏蔽的科室', key: 'shieldPlaceIdList', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const pageNo = ref(0);
const officeList = ref([]);
const placeList = ref([]);

const search = ref('');
const name = ref(null);
const checkType = ref("");
const abnormalLev = ref("");
const specialOffice = ref("");
watch(name, () => {
    search.value = name.value
})
watch(checkType, () => {
    search.value = checkType.value
})
watch(abnormalLev, () => {
    search.value = abnormalLev.value
})
watch(specialOffice, () => {
    search.value = specialOffice.value
})

function loadItems({page, itemsPerPage}) {
    pageNo.value = Number(page);
    pageSize.value = itemsPerPage
    loading.value = true;
    axios.post('/checkItem/select', {
        pageNo: page,
        pageSize: itemsPerPage,
        itemName: name.value,
        checkType: checkType.value,
        abnormalLev: abnormalLev.value,
        specialOffice: specialOffice.value
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
    axios.post('/checkFunctionOffice/getAll', {
        pageNo: 1,
        pageSize: 1000,
        officeName: ""
    }).then(({data}) => {
        officeList.value = data.data;
    })
    axios.post('/checkPlace/getAll', {
        pageNo: 1,
        pageSize: 1000,
        officeName: ""
    }).then(({data}) => {
        placeList.value = data.data;
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
  itemName: "",
  itemAbnormal: "",
  abnormalLev: "",
  specialOffice: "",
  placeIdList: [],
  shieldPlaceIdList: [],
  officeId: []
});

function resetEditedItem() {
    editedItem.value = {
        itemName: "",
        itemAbnormal: "",
        abnormalLev: "",
        specialOffice: "",
        placeIdList: [],
        shieldPlaceIdList: [],
        officeId: []
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    resetEditedItem()
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.itemAbnormal += ""
    editedItem.value.abnormalLev += ""
    editedItem.value.specialOffice += ""
    editedItem.value.checkType += ""
    editedItem.value.officeId = editedItem.value.officeId.split(",")
    editedItem.value.officeId = editedItem.value.officeId.map(item => Number(item))
    editedItem.value.placeIdList = JSON.parse(editedItem.value.placeIdList)
    editedItem.value.shieldPlaceIdList = JSON.parse(editedItem.value.shieldPlaceIdList)
    console.log(editedItem.value.shieldPlaceIdList)
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        editedItem.value.officeId = editedItem.value.officeId.join(",")
        editedItem.value.placeIdList = JSON.stringify(editedItem.value.placeIdList)
        editedItem.value.shieldPlaceIdList = JSON.stringify(editedItem.value.shieldPlaceIdList)
        axios({
            method: 'POST',
            url: '/checkItem/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: 1, itemsPerPage: pageSize.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        editedItem.value.officeId = editedItem.value.officeId.join(",")
        editedItem.value.placeIdList = JSON.stringify(editedItem.value.placeIdList)
        editedItem.value.shieldPlaceIdList = JSON.stringify(editedItem.value.shieldPlaceIdList)
        axios({
            method: 'POST',
            url: '/checkItem/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: 1, itemsPerPage: pageSize.value})
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    axios({
        method: "POST",
        url: '/checkItem/delete',
        data: [beDeleteItem.value.id]
    }).then(() => {
        snackbar.info("删除成功")
        loadItems({page: 1, itemsPerPage: pageSize.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = null
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>巡检项管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details placeholder="查询名称"></v-text-field>
        <v-select v-model="checkType" :clearable="true" hide-details label="巡检类型" required :items="[{value:'0',title:'普通巡检'},{value:'1',title:'安全月检'}]"></v-select>
        <v-select v-model="abnormalLev" :clearable="true" hide-details label="异常等级" required :items="[{value:'0',title:'绿色'},{value:'1',title:'黄色'},{value:'2',title:'橙色'},{value:'3',title:'红色'}]"></v-select>
        <v-select v-model="specialOffice" :clearable="true" hide-details label="科室类型" required :items="[{value:'0',title:'普通科室'},{value:'1',title:'重点科室'},{value:'2',title:'病区'},{value:'3',title:'行政后勤'},{value:'4',title:'其他'},{value:'5',title:'锅炉房'}]"></v-select>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.itemName" label="巡检项名称" required></v-text-field>
                    <v-select v-model="editedItem.itemAbnormal" label="巡检项异常" required :items="[{value:'0',title:'是'},{value:'1',title:'否'}]"></v-select>
                    <v-select v-model="editedItem.checkType" label="巡检类型" required :items="[{value:'0',title:'普通巡检'},{value:'1',title:'安全月检'}]"></v-select>
                    <v-select v-model="editedItem.abnormalLev" label="异常等级" required :items="[{value:'0',title:'绿色'},{value:'1',title:'黄色'},{value:'2',title:'橙色'},{value:'3',title:'红色'}]"></v-select>
                    <v-select v-model="editedItem.specialOffice" label="科室类型" required :items="[{value:'0',title:'普通科室'},{value:'1',title:'重点科室'},{value:'2',title:'病区'},{value:'3',title:'行政后勤'},{value:'4',title:'其他'},{value:'5',title:'锅炉房'}]"></v-select>
                    <v-autocomplete
                    v-model="editedItem.placeIdList"
                    label="显示的科室"
                    required
                    :items=placeList
                    item-title="placeName"
                    item-value="id"
                    multiple
                    ></v-autocomplete>
                    <v-autocomplete
                    v-model="editedItem.shieldPlaceIdList"
                    label="屏蔽的科室"
                    required
                    :items=placeList
                    item-title="placeName"
                    item-value="id"
                    multiple
                    ></v-autocomplete>
                    <v-autocomplete
                    v-model="editedItem.officeId"
                    :items=officeList
                    item-title="officeName"
                    item-value="id"
                    multiple
                    label="职能科室"
                    required></v-autocomplete>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="pageSize" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ (pageNo - 1) * 10 + index + 1 }}</span>
        </template>
        <template v-slot:item.itemAbnormal="{ item }">
            <span v-if="item.raw.itemAbnormal == 0">是</span>
            <span v-if="item.raw.itemAbnormal == 1">否</span>
        </template>
        <template v-slot:item.checkType="{ item }">
            <span v-if="item.raw.checkType == 0">普通巡检</span>
            <span v-if="item.raw.checkType == 1">安全月检</span>
        </template>
        <template v-slot:item.specialOffice="{ item }">
            <span v-if="item.raw.specialOffice == 0">普通科室</span>
            <span v-if="item.raw.specialOffice == 1">重点科室</span>
            <span v-if="item.raw.specialOffice == 2">病区</span>
            <span v-if="item.raw.specialOffice == 3">行政后勤</span>
            <span v-if="item.raw.specialOffice == 4">其他</span>
            <span v-if="item.raw.specialOffice == 5">锅炉房</span>
        </template>
        <template v-slot:item.officeId="{ item }">
            <span v-for="k in officeList">
                <span v-for="i in item.raw.officeId.split(',')" v-show="i == k.id">{{ k.officeName }}&nbsp;</span>
            </span>
        </template>
        <template v-slot:item.placeIdList="{ item }">
            <span v-for="k in placeList">
                <span v-for="i in JSON.parse(item.raw.placeIdList)" v-show="i == k.id">{{ k.placeName }}&nbsp;</span>
            </span>
        </template>
        <template v-slot:item.shieldPlaceIdList="{ item }">
            <span v-for="k in placeList">
                <span v-for="i in JSON.parse(item.raw.shieldPlaceIdList)" v-show="i == k.id">{{ k.placeName }}&nbsp;</span>
            </span>
        </template>
        <template v-slot:item.abnormalLev="{ item }">
            <span v-if="item.raw.abnormalLev == 0">绿色</span>
            <span v-if="item.raw.abnormalLev == 1">黄色</span>
            <span v-if="item.raw.abnormalLev == 2">橙色</span>
            <span v-if="item.raw.abnormalLev == 3">红色</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item.raw)"></v-btn>
            <!-- <v-btn icon="mdi-delete" variant="text" @click="clickDelete(item.raw)"></v-btn> -->
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
